<template>
    <div class="m-style">
        <div class="clientMess-box">
            <div class="container">
                <van-list v-model="loading" @load="onLoad" :finished="finished" finished-text="没有更多了">
                    <template v-for="(v,i) in page.list">
                        <div class="clientMess-demo" @click="deal(v)">
                            <van-image v-if="false" round width="60" height="60"
                                       src="https://img.yzcdn.cn/vant/cat.jpeg" class="left"/>
                            <div class="date" >
                                <strong>{{v.bpmName}}({{v.id}})</strong>
                                <van-icon name="more"/>
                            </div>
                            <ul class="ul_tp comm_ul">
                                <li v-if="false">
                                    <span class="txt">任务ID</span>
                                    <span class="infos">{{v.id}}</span>
                                </li>
                                <li v-for="vv in (v.bpmModel.listFields||[])">
                                    <span class="txt">{{vv}}</span>
                                    <span class="infos">{{v[vv]}}</span>
                                </li>
                                <li>
                                    <span class="txt">起草人</span>
                                    <span class="infos">{{v.pubUName}}</span>
                                </li>
                                <li>
                                    <span class="txt">当前经办人</span>
                                    <span class="infos">{{v.uName}}</span>
                                </li>
                                <li>
                                    <span class="txt">创建时间</span>
                                    <span class="infos">{{v.createTime}}</span>
                                </li>
                            </ul>

                            <div class="right" v-if="false">
                                <h5>{{v.bpmName}}</h5>
                                <p>任务ID：{{v.id}}</p>
                                <p>起草人：{{v.pubUName}}</p>
                                <p v-if="false">任务状态：{{v.state}}</p>
                                <p>当前经办人：{{v.uName}}</p>
                                <p>创建时间：{{v.createTime}}</p>
                            </div>
                        </div>
                        <div class="line"></div>
                    </template>
                </van-list>
            </div>
        </div>

    </div>
</template>

<script>
    import url from "../url/url";

    export default {
        name: "list_item",
        props: ["type"],
        data() {
            return {
                page: {
                    ...this.init()
                },
                loading: false,
                finished: false,
                pageNum: 0,
                refreshing: false
            }
        },
        methods: {
            init() {
                return {
                    list: []
                }
            },
            load() {
                $.get(url.showBpmList /*"/api/bpm/workflow/getInsList"*/, {
                    type: this.type,
                    page: this.pageNum + 1
                }).then(r => {
                    (r.data.list || []).forEach(e => {
                        this.page.list.push(e)
                    });
                    this.pageNum = r.data.pageNumber
                    this.loading = false
                    if (r.data.list.length === 0) {
                        this.finished = true
                    }
                })
            },
            onLoad() {
                console.log("load", this.loading)
                this.load()
            },
            deal(v) {
                this.$router.push({
                    path: "/deal",
                    query: {
                        id: v._id
                    }
                })
                // console.log(v._id)
            }
        },
        mounted() {
            // this.load()
        }
    }
</script>

<style scoped>
    /*.list-item{*/
    /*    display: flex;*/
    /*    padding: 10px;*/
    /*}*/
    /*.left{*/
    /*}*/
    /*.right{*/
    /*    flex: 1;*/
    /*    text-align: left;*/
    /*    display: flex;*/
    /*    flex-direction: column;*/
    /*    padding-left: 20px;*/
    /*    h5 {*/
    /*        margin-top: 0;*/
    /*        margin-bottom: 5px;*/
    /*    }*/
    /*    p{*/
    /*        margin-top: 2px;*/
    /*        margin-bottom: 2px;*/
    /*    }*/
    /*}*/
    /*.line{*/
    /*    height: 1px;*/
    /*    width: 100%;*/
    /*    background: #ddd;*/
    /*    margin-top: 5px;*/
    /*    margin-bottom: 5px;*/
    /*}*/
    .txt {
        text-align: left;
    }
</style>
